<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>聊天界面</title>
		<link rel="stylesheet" href="/css/chat.css">
		<script src="/js/jquery/jquery.min.js"></script>
		<script src="/js/flexible.js"></script>
		<script src="/js/common.js"></script>

<!--<style>

	html,body{
		height: 100%;
		margin: 0;
		padding: 0;
	}
	/*需将主区域内容（不包括footer）设置为此class，一般为div*/
	.page{
		box-sizing: border-box;/*为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制*/
		min-height: 100%;
		padding-bottom: 25px;
	}
	footer{
		height: 25px;
		margin-top: -25px;
		opacity: 0.5;
		color: #5E5E5E;
	}
</style>-->
	</head>

	<body>
		<header class="header">
			<a class="back" href="javascript:history.back()"></a>
			<h5 class="tit">追星星的人</h5>
		</header>

		<div class="message">

		</div>
		<div class="footer">
			<img src="/images/hua.png" alt="" />
			<img src="/images/xiaolian.png" alt="" />
			<input type="text"  />
			<p>发送</p>
		</div>
	<script type="text/javascript" charset="utf-8">
		//获取当前登录用户信息
		var user=getUser();
		//存储当前好友信息
		var friend;
		//获取当前好友id
       var friendid= getParams().id;
        console.log(friendid);
        //加载完毕后获取好友的头像
        $.get("/users/userFriend",{friendid:friendid},function (data) {
            friend=data.list[0];
			//设置当前title
            $(".tit").html(friend.nickName);
            $(".send img").attr("src",(data.list[0]).headImgUrl)
            $(".show img").attr("src",user.headImgUrl)
        });
        ///*接受消息*/
        function send(headSrc,str){
            var html="<div class='send'><div class='msg'><img src="+headSrc+" />"+
                "<p><i class='msg_input'></i>"+str+"</p></div></div>";
            upView(html);
        }
        // /*发送消息*/
        function show(headSrc,str){
            var html="<div class='show'><div class='msg'><img src="+headSrc+" />"+
                "<p><i class='msg_input'></i>"+str+"</p></div></div>";
            upView(html);
            $.post("/chat",{friendId:friend.id,dialogue:str},function (data) {})
        }
        // /*更新视图*/
        function upView(html){
            $('.message').append(html);
            $('body').animate({scrollTop:$('.message').outerHeight()-window.innerHeight},200)
        }
        function sj(){
            return parseInt(Math.random()*10)
        }
        $(function(){
            $('.footer').on('keyup','input',function(){
                if($(this).val().length>0){
                    $(this).next().css('background','#114F8E').prop('disabled',true);

                }else{
                    $(this).next().css('background','#ddd').prop('disabled',false);
                }
            })
            $('.footer p').click(function(){
                show(user.headImgUrl,$(this).prev().val());
            })
        })

        // /*测试数据*/
       /* var arr=['我是小Q','好久没联系了！','你在想我么','怎么不和我说话','跟我聊会天吧'];
        var imgarr=['images/touxiang.png','images/touxiangm.png']
        test()
        function test(){
            $(arr).each(function(i){
                setTimeout(function(){
                    send(friend.headImgUrl,arr[i])
                },sj()*500)
            })
        }*/
       //获取对方的聊天
        setInterval(function () {
            var state=sessionStorage.getItem("state");
                $.get("/chat",{friendId:getParams().id},function (data) {
                    console.log(data);
                    $.each(data.list,function (index,ele) {
                        send(friend.headImgUrl,ele.dialogue);
                    })
                })
        },2000)


	</script>
	</body>
</html>